<template>
  <div>
    <CollapsePanel
      v-for="(item, index) in panels"
      :key="item.name"
      :title="item.title"
      :name="item.name"
      :default-expanded="true"
    >
      <div v-if="index === 0">
        <PlusDescriptions :column="4" :columns="columns" :data="descriptionsData" />
      </div>
      <div v-if="index === 1">
        <BankInfo :info="descriptionsData" />
      </div>
      <div v-if="index === 2">
        <PlusTable :columns="tableConfig" :table-data="tableData" />
      </div>
    </CollapsePanel>
    <div class="p-20 text-center bg-white">
      <el-button @click="goBack">返回</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { PlusColumn, RecordType } from '@wlydfe/pro-ui'
import { priceToThousands } from '@wlydfe/core'
import { useTable } from '@wlydfe/pro-ui'
import { creditmanageApi } from '@/api'
import CollapsePanel from '@/components/CollapsePanel/CollapsePanel.vue'
import { useEnum } from '@/composables/enum/useEnum'
import BankInfo from './components/bankInfo.vue'

interface TableRow {
  bizSn: number
}
const router = useRouter()
const route = useRoute()
const enumConfig = useEnum([CommonDictEnum.YDDHKZT])
const { tableData } = useTable<TableRow[]>()
const panels = [
  { title: '用信信息', name: '1' },
  { title: '银行账户信息', name: '2' },
  { title: '还款计划', name: '3' },
]
onMounted(() => {
  if (route.query.bizSn) {
    getList(route.query.bizSn)
    getCreditDetailPlan(route.query.bizSn)
  }
})
const descriptionsData = ref<RecordType>({})
const getList = async id => {
  try {
    const { succeed, model } = await creditmanageApi.getApplyDetail(id)
    if (succeed) {
      descriptionsData.value = model[0] || {}
      console.log(descriptionsData.value)
    }
  } catch {}
}

const getCreditDetailPlan = async id => {
  try {
    const { succeed, model } = await creditmanageApi.getCreditDetailPlan({
      bizSn: id,
    })
    if (succeed) {
      tableData.value = model ?? []
    }
  } catch {}
}

const goBack = () => {
  router.go(-1)
}
const columns: PlusColumn[] = [
  {
    label: '用信编号',
    width: 120,
    prop: 'applySn',
  },
  {
    label: '融资方',
    width: 120,
    prop: 'companyName',
  },
  {
    label: '金融机构',
    width: 120,
    prop: 'financialInstitution',
  },
  {
    label: '年利率',
    width: 120,
    prop: 'yearRate',
  },
  {
    label: '放款金额',
    prop: 'loanTotalAmt',
    render: value => {
      return `${priceToThousands(value)}元`
    },
  },
  {
    label: '还款方式',
    prop: 'repaymentMethod',
    render: value => {
      return '按月付息，到期还本'
    },
  },
  {
    label: '起息日',
    width: 190,
    prop: 'interestStartDate',
    valueType: 'date-picker',
  },
  {
    label: '到期日',
    width: 190,
    prop: 'interestEndDate',
    valueType: 'date-picker',
  },
]
const tableConfig: PlusColumn[] = [
  {
    label: '期数',
    prop: 'term',
  },
  {
    label: '起始日期',
    prop: 'startDate',
    valueType: 'date-picker',
    fieldProps: {
      format: 'YYYY-MM-DD HH:mm:ss',
    },
  },
  {
    label: '还款日',
    prop: 'dueDate',
    valueType: 'date-picker',
    fieldProps: {
      format: 'YYYY-MM-DD HH:mm:ss',
    },
  },
  {
    label: '结清日期',
    prop: 'payoffDate',
    valueType: 'date-picker',
    fieldProps: {
      format: 'YYYY-MM-DD HH:mm:ss',
    },
  },
  {
    label: '本期本金应还款金额',
    prop: 'principalAmt',
    render: value => {
      return priceToThousands(value)
    },
  },
  {
    label: '本期剩余未还本金金额',
    prop: 'unrepaidPrincipalAmt',
    render: value => {
      return priceToThousands(value)
    },
  },
  {
    label: '本期利息应还款金额',
    prop: 'interestAmt',
    render: value => {
      return priceToThousands(value)
    },
  },
  {
    label: '本期剩余利息还款金额',
    prop: 'unrepaidInterestAmt',
    render: value => {
      return priceToThousands(value)
    },
  },
  {
    label: '应还罚息',
    prop: 'penaintrAmt',
    render: value => {
      return priceToThousands(value)
    },
  },
  {
    label: '复利金额',
    prop: 'compintrAmt',
    render: value => {
      return priceToThousands(value)
    },
  },
  {
    label: '期次状态',
    prop: 'repayStatus',
    valueType: 'select',
    options: enumConfig[CommonDictEnum.YDDHKZT],
  },
]
</script>
